<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地图和定位</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/jq3.js" type="text/javascript" charset="utf-8"></script>

		<script src="../js/mui.js"></script>
		<link href="../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />

		<style type="text/css">
			#controlBoard {
				position: absolute;
				top: 80%;
				width: 100%;
				min-height: 20%;
				background-color: lightblue;
				padding: 0.5rem;
			}

			button {
				margin: 0.5rem;
			}
		</style>
	</head>
	<body>
		<div id="mymap">

		</div>
		<div id="controlBoard">
			<button type="button" class="mui-btn mui-btn-warning" id="located">
				<span class="mui-icon mui-icon-location"></span>定位
			</button>
			<button type="button" class="mui-btn mui-btn-warning" onclick="mapZoom(true)">
				<span class="mui-icon mui-icon-plus"></span>
			</button>
			<button type="button" class="mui-btn mui-btn-warning" onclick="mapZoom(false)">
				<span class="mui-icon mui-icon-minus"></span>
			</button>
			<br>
			<button type="button" class="mui-btn mui-btn-warning" onclick="startLine()">
				<span class="mui-icon mui-icon-paperplane"></span>行走路线
			</button>
			<button type="button" class="mui-btn mui-btn-warning" onclick="stopLine()">
				<span class="mui-icon mui-icon-paperplane"></span>清除路线
			</button>
		</div>
	</body>
</html>
<script type="text/javascript">
	var _map = null; // 地图对象
	var _line = null; // 
	var _drawTimer = null;
	var _marker = null;

	var _points = [{
		"longitude": 108.27438,
		"latitude": 22.864958
	}];

	document.addEventListener('plusready', plusReady, false); // 等待 plus ready 

	function plusReady() {
		if (!_map) {
			_map = plus.maps.create("_map", {
				top: "4px",
				left: '0px',
				width: '100%',
				height: '80%',
				position: 'static'
			});
			// 在当前视窗追加地图控件
			plus.webview.currentWebview().append(_map);

			// _map.getCurrentCenter(function(stat, point) {
			// 	console.info("当前地图的中心坐标" + JSON.stringify(point))
			// })

			// 显示缩放控件
			_map.showZoomControls(true);
		}

		initEvents();

		$("#located").click();
		_map.setZoom(16);
	}

	function initEvents() {
		// 定位当前位置
		$("#located").click(function() {
			plus.geolocation.getCurrentPosition((pos) => {

				var coords = pos.coords;
				// 创建新的点
				let me = new plus.maps.Point(coords.longitude, coords.latitude);

				console.info(JSON.stringify(me));
				_map.setCenter(me);

				// 给标记当前点

				// var marker = new plus.maps.Marker(me);
				// // var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
				// // marker.setBubble(bubble);

				// marker.setIcon("../img/213.jpg");
				// _map.addOverlay(marker);

			}, (error) => {
				console.info(error.message)
			}, {
				enableHighAccuracy: false
			})
		});
	}

	function mapZoom(flag) {
		// 获取当前地图的级别
		var currZoom = _map.getZoom();
		// 根据参数, 缩放
		if (flag) {
			currZoom += 1;
		} else {
			currZoom -= 1;
		}
		_map.setZoom(currZoom);
	}


	// 画线 
	function startLine() {
		if (_drawTimer) {
			mui.toast('已经在计时, 请勿重复点击', {
				duration: 'short',
				type: 'div'
			})
			return;
		}
		_drawTimer = setInterval(function() {
			// 取坐标点
			plus.geolocation.getCurrentPosition((res) => {
				var coords = res.coords;
				// console.info(JSON.stringify(coords));
				_points.push(coords);

				// 先清空后重画 , 或者使用 polylineObj.setPath( points )
				_map.removeOverlay(_line);
				_map.removeOverlay(_marker);
				crawLine();

			}, (err) => {

			}, {
				enableHighAccuracy: false
			});

		}, 5000);



	}


	function crawLine() {
		let points4line = [];
		// 
		for (let i = 0; i < _points.length; i++) {
			let tempPoint = new plus.maps.Point(_points[i].longitude, _points[i].latitude);
			// 最后一个点 画上图标
			if (i == _points.length - 1) {
				_marker = new plus.maps.Marker(tempPoint);
				_marker.setIcon("../img/213.jpg")
				_map.addOverlay(_marker);
				
				_map.setCenter(tempPoint); // 地图始终保持最后一个点为中心点, (防止线出画面)
			}
			points4line.push(tempPoint);
		}
		// 画线
		_line = new plus.maps.Polyline(points4line); // 参数是一组point
		_line.setStrokeColor("#00ff00");
		_line.setLineWidth(40);
		_line.setStrokeOpacity(0.4)
		_map.addOverlay(_line);
	}

	function stopLine() {
		// console.info("停止监听并清空路线");
		clearTimeout(_drawTimer);
		_drawTimer = null;
		_map.removeOverlay(_line);
		_map.removeOverlay(_marker);
		// 动态数据也要清空
		_points = []; 
		// 计时器清空


	}
</script>
